{% extends 'layout/base01.html' %}

<!-- 添加自己页面的内容 -->
<!-- 修改标题 -->
{% block title %}
    用户登录
{% endblock %}

<!-- 修改样式 -->
{% block css %}
    <style>
        #loginForm {
            width: 500px;
            margin: 150px auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            padding: 30px;
            border-radius: 20px;
        }
        .error_msg{
            color:red;
            position: absolute;
        }
    </style>
{% endblock %}

<!-- 修改内容 -->
{% block content %}
    <form id="loginForm">
        {% csrf_token %}
        <h1 style="text-align: center">用户登录</h1>
        <hr>
        <!-- 通过form对象快速生成表单 -->
        {% for field in form %}
            <!--判断是不是验证码的字段 -->
            {% if field.name == 'image_code' %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                    <div class="clearfix">
                        <div class="col-md-6" style="padding-left: 0">
                            {{ field }}
                            <span class="error_msg"></span>
                        </div>
                        <div class="col-md-6">
                            <img  id="imageCode" src="{% url 'image_code' %}" alt="图片验证码">
                        </div>
                    </div>
                    <!-- 添加一个属性 class="form-control" -->
                </div>
            {% else %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                    {{ field }} <!-- 添加一个属性 class="form-control" -->
                    <span class="error_msg"></span>
                </div>
            {% endif %}
        {% endfor %}
        <div style="margin-top: 30px">
            <input id="btnSubmit" type="button" class="btn btn-primary" style="width: 120px" value="登录">
            <a href="{% url 'register' %}" style="margin-left: 20px">账号注册？</a>
            <a href="{% url 'sms_login' %}" style="margin-left: 10px">验证码登陆？</a>
            <a href="{% url 'resetpassword' %}" style="margin-left: 10px">忘记密码？</a>
        </div>

    </form>
{% endblock %}

<!-- 修改Script -->
{% block js %}
    <script>
        $(function () {
           //============点击图片验证码===========
           $('#imageCode').click(function () {
               /*
                第一种

               // 获取之前的url
               let oldUrl =  $('#imageCode').attr('src');
               //设置
               $('#imageCode').attr('src',  oldUrl+'?');
               */

               // 第二种
               $('#imageCode').attr('src', "{% url 'image_code' %}" + "?" + Math.random())
           });

           // ===============登录功能=======================
            $('#btnSubmit').click(function () {
                //清楚所有的错误展示
                $('.error_msg').empty();

                // ====Ajax请求====
                $.ajax({
                    url: "{% url 'login' %}",
                    method: 'post',
                    data: $('#loginForm').serialize(),
                    dataType: 'json',
                    success:function (res) {
                        console.log(res);
                        // 如果返回的True
                        if (res.status){
                            // 跳转到首页
                            location.href = {% url 'home' %};
                        } else {
                            // 展示错误
                            $.each(res.errors, function (key,value) {
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }

                })
            });
        });
    </script>
{% endblock %}
